<template>
    <div>
        <mj-title type="h2" title="ColorPicker 颜色选择器"></mj-title>
        <div class="page-desc">用于颜色选择，支持多种颜色格式，支持颜色预设。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-color-picker v-model="color1"></mj-color-picker>
                <span class="ml15">{{ color1 }}</span>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-color-picker v-model="color1">&lt;/mj-color-picker>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
            color1:'#000000'
        }
    }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="禁用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-color-picker v-model="color2" disabled></mj-color-picker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-color-picker v-model="color2" disabled>&lt;/mj-color-picker>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
            color2:'#6593DE',
        }
    }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="change事件调用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-color-picker v-model="color3" @change="onChangeColor"></mj-color-picker>
                <div :style="{background:color3,height:'100px',borderRadius:'5px',marginTop:'3px'}"></div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-color-picker v-model="color3" @change="onChangeColor">&lt;/mj-color-picker>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
            color3:'#6593DE',
        }
    },
    methods: {
        onChangeColor(val) {
            console.log('颜色：',val)
        }

    },
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="尺寸"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-color-picker v-model="color3"></mj-color-picker>
                <mj-color-picker v-model="color3" size="small" class="ml30"></mj-color-picker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-color-picker v-model="color3">&lt;/mj-color-picker>
    &lt;mj-color-picker v-model="color3" size="small">&lt;/mj-color-picker>
&lt;/template>
&lt;script>
    export default {
        data() {
            return {
                color3:'#6593DE',
            }
        }
    }
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="ColorPicker 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>model-value</td>
                    <td>绑定的值，可使用 v-model 双向绑定</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>transfer</td>
                    <td>是否将弹层放置于 body 内，当父层有overflow:hidden属性，不受父层的裁剪影响</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>禁用</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>尺寸，可选值为<code>small</code>或者不设置</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="ColorPicker 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>回调</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>change</td>
                    <td>当绑定值变化时触发</td>
                    <td>当前显示的颜色值</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>

export default {
    data() {
        return {
            color1:'#000000',
            color2:'#6593DE',
            color3:'#6593DE',
        }
    },
    methods: {
        onChangeColor(val) {
            console.log('颜色：',val)
        }

    },
}
</script>
